<template>
  <div
    v-loading="pullUserLoading"
    class="flex flex-wrap gap-2 animate__animated animate__fadeInRight"
  >
    <el-card class="card-left grow basis-[300px] rounded pt-20 pb-10 px-6">
      <el-upload
        :action="action"
        :show-file-list="false"
        name="avatar"
        :before-upload="onBeforeUplaod"
      >
        <div class="upload-box">
          <Transition
            mode="out-in"
            enter-active-class="animate__animated animate__faster animate__fadeIn"
            leave-active-class="animate__animated animate__faster animate__fadeOut"
          >
            <div
              v-if="user.avatar"
              class="upload-select"
              :style="{ background: `url(${user.avatar}) center/cover` }"
            ></div>
            <div class="upload-select" v-else>
              <el-icon class="upload-icon mb-2"><component :is="Icons['Camera']" /></el-icon>
              <span class="text-sm">上传图片</span>
            </div>
          </Transition>
        </div>
      </el-upload>

      <span class="mt-6 text-base text-center text-[#919eab]">
        支持 *.jpeg, *.jpg, *.png, *.gif <br />最大 3 Mb
      </span>

      <h4 class="self-start mt-10">邮箱验证</h4>

      <section class="self-stretch flex justify-between items-center mt-2">
        <span class="text-base text-[#637381]">是否禁止向用户发送邮箱验证</span>
        <el-switch class="ml-2" v-model="isEmail" />
      </section>

      <el-button class="mt-6" type="danger" plain @click="onDelete" v-if="id">删除用户</el-button>

      <UserStatusTag class="absolute right-0 top-0" :status="user.status" />
    </el-card>
    <el-card class="card-right grow-5 basis-[400px] self-start">
      <LabelInput v-model="user.username" label="用户名" />
      <LabelInput v-model="user.email" label="邮箱" />
      <LabelInput v-model="user.phone" label="手机号" />
      <LabelSelect v-model="user.status" :options="configStore.selectUserStatus" label="状态" />
      <LabelInput v-model="user.realname" label="真实姓名" />
      <template #footer>
        <el-button
          class="!rounded-lg !h-auto !leading-relaxed"
          color="#212b36"
          :loading="isLoading"
          @click="onSave"
        >
          保存
        </el-button>
      </template>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import * as Icons from '@/icons'
import UserStatusTag from './components/UserStatusTag.vue'
import { useConfigStore } from '@/stores'
import { userSave } from '@/services/user'

const configStore = useConfigStore()

const { id, pullUserLoading, action, onBeforeUplaod, user, isEmail, onDelete, isLoading, onSave } =
  userSave()
</script>

<style scoped lang="scss">
.card-left {
  :deep(.el-card__body) {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.card-right {
  :deep(.el-card__body) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  :deep(.el-card__footer) {
    text-align: right;
  }
}
.el-upload {
  .upload-box {
    padding: 8px;
    width: 144px;
    height: 144px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px dashed rgba(145, 158, 171, 0.2);
    box-sizing: border-box;
  }
  .upload-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
    border-radius: 50%;
    color: rgb(145, 158, 171);
    background-color: rgba(145, 158, 171, 0.08);
    font-size: 24px;
  }
}
</style>
